<template>
  <div class="emit">
    <van-nav-bar title="系统设置" left-text="" left-arrow @click="fan" />
    <div v-if="token">
      <!-- 头像 -->
      <van-cell is-link title="头像" class="tou" @click="tou" style="padding-left: 15px;padding-right:10px;">
        <!-- <img src="../../img/user.jpg" alt="" class="img"> -->
        <div v-if="token">
          <img  :src="avatars" alt="Preview" class="img">
          <!-- 文件输入框，隐藏 -->
          <input type="file" ref="fileInput" style="display: none" @change="handleFileChange">
        </div>
        <div v-else>
          <img v-if="imageUrl" :src="imageUrl" alt="Preview" class="img" />
        </div>
        <!-- <van-uploader :after-read="afterRead" class="up" /> -->
      </van-cell>
      <!-- 头像弹框 -->
      <van-popup v-model:show="showT" class="popup-tou">
        <p class="pai" @click="tack">拍照</p>
        <p @click="triggerFileInput">选取本地图片</p>
      </van-popup>
      <!-- <van-popup v-model:show="showT" class="popup-tou2">
        <p>取消</p>
      </van-popup> -->
      <!-- 昵称 -->
      <van-cell is-link title="昵称" class="new" @click="toemitname" style="padding-left: 15px;padding-right:10px;">
        <span class="name" style="margin-right: 10px;">{{ nickname }}</span>
      </van-cell>
      <!-- 账号设置 -->
      <van-cell is-link title="账号设置" class="new" style="padding-left: 15px;padding-right:10px;"></van-cell>
      <!-- 新消息通知 -->
      <van-cell is-link title="新消息通知" class="new" style="padding-left: 15px;padding-right:10px;">
        <span class="yi" style="margin-right: 10px;">已开启</span>
      </van-cell>
      <!-- 隐私 -->
      <van-cell is-link title="隐私" class="new" style="padding-left: 15px;padding-right:10px;"></van-cell>
      <!-- 个人信息收集清单 -->
      <van-cell is-link title="个人信息收集清单" class="new" style="padding-left: 15px;padding-right:10px;"></van-cell>
      <!-- 第三方信息共享清单 -->
      <van-cell is-link title="第三方信息共享清单" class="new" style="padding-left: 15px;padding-right:10px;"></van-cell>
      <!-- 当前版本 -->
      <van-cell title="当前版本" class="new" style="padding-left: 15px;padding-right:10px;">
        <span class="name" style="margin-right: 10px;">V6.4.34</span>
      </van-cell>
      <button @click="tologin" class="tologin">退出登录</button>
      <van-popup v-model:show="show" class="popup" style="padding-left: 15px;padding-right:10px;">
        <p>是否退出登录？</p>
        <span>
          <button class="qu" @click="qu">取消</button>
          <button class="que" @click="que">确定</button>
        </span>
      </van-popup>
    </div>
    <div v-else>
      <div>
        <!-- 新消息通知 -->
        <van-cell is-link title="新消息通知" class="new"
          style="padding-left: 15px;padding-right:10px;"><span>已开启</span></van-cell>
        <!-- 隐私 -->
        <van-cell is-link title="隐私" class="new" style="padding-left: 15px;padding-right:10px;"></van-cell>
        <!-- 个人信息收集清单 -->
        <van-cell is-link title="个人信息收集清单" class="new" style="padding-left: 15px;padding-right:10px;"></van-cell>
        <!-- 第三方信息共享清单 -->
        <van-cell is-link title="第三方信息共享清单" class="new" style="padding-left: 15px;padding-right:10px;"></van-cell>
        <!-- 当前版本 -->
        <van-cell title="当前版本" class="new"><span class="v"
            style="padding-left: 15px;padding-right:10px;">V6.4.34</span></van-cell>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const fan=()=>{
  router.push('/mine')
}
// 确认框
const show = ref(false);
// 头像框
const showT = ref(false)
// 拍照
const tack=()=>{
  router.push('/take')
}
// 上传头像
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
};
// 修改后的昵称
const name = localStorage.getItem('nickname')
// console.log(localStorage.getItem('nickname'))
// 点击头像显示头像弹框
const tou = () => {
  showT.value = true
}
// 点击去修改昵称
const toemitname = () => {
  window.location.href = '/emit-emit'
}
// 获取token
const token = localStorage.getItem('token')
// 获取头像
const avatars = localStorage.getItem('avatars')
const nickname = localStorage.getItem('nickname')
const onClickLeft = () => history.back();
// 点击退出登录显示弹框
const tologin = () => {
  show.value = true;
}
// 点击取消关闭弹框
const qu = () => {
  show.value = false
}
// 点击确定退出登录
const que = () => {
  console.log('退出登录')
  // this.$router.push('/login')
  localStorage.removeItem('token')
  window.location.href = '/login'
}

const imgs = localStorage.getItem('img')

</script>
<script lang="ts">
export default {
  data() {
    return {
      // 存储图片URL
      imageUrl: null
    };
  },
  methods: {
    // 触发文件输入框
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    // 处理文件选择变化
    handleFileChange(event) {
      const file = event.target.files[0];
      console.log(file)
      if (file && file.type.startsWith('image/')) {
        // 创建一个URL对象，用于预览图片
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageUrl = e.target.result;
          localStorage.setItem('avatars',this.imageUrl)
        };
        reader.readAsDataURL(file);
        window.location.reload()
      } else {
        alert('请选择图片文件！');
        // 清空选择的文件
        this.$refs.fileInput.value = '';
        this.imageUrl = null;
      }
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tou {
  width: 94%;
  height: 100px;
  margin-top: 20px;
  margin-left: 3%;
  align-items: center;
  border-radius: 10px;
}

.img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  align-items: center;
  margin-top: 6px;
}

.name {
  color: rgba(0, 0, 0, 0.634);
  font-weight: 550;
}

.emit {
  width: 100%;
  height: 1340px;
  background-color: #f1efef;
}

.new {
  width: 94%;
  height: 70px;
  align-items: center;
  margin-left: 3%;
  margin-top: 20px;
  border-radius: 16px;
  /* position: relative;
  cursor: help; */
}

span {
  color: rgba(0, 94, 255, 0.6);
  font-weight: 800;
}

.tologin {
  width: 96%;
  height: 80px;
  margin-left: 2%;
  border-radius: 10px;
  color: red;
  background-color: #fff;
  border: none;
  margin-top: 60px;
  font-size: 30px;
}

.v {
  color: #000;
  font-weight: 400;
  margin-right: 20px;
}

.popup {
  width: 80%;
  height: 200px;
  margin-left: 10%;
  border-radius: 20px;
  position: relative;
  top: -300px;
  font-size: 30px;
}

.popup>p {
  height: 40px;
  text-align: center;
  margin-top: 40px;
}

.popup>span>button {
  height: 80px;
  margin-top: 40px;
  background-color: #fff;
}

.qu {
  width: 50%;
  position: absolute;
  color: black;
  font-weight: 400;
  left: 0;
  border: none;
  border-top: 1px solid #ccc;
}

.que{
  width: 50%;
  position: absolute;
  right: 0;
  border: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.popup-tou {
  width: 86%;
  height: 200px;
  margin-left: 7%;
  border-radius: 10px;
  text-align: center;
  margin-top: 500px;
  font-size: 30px;
}

.popup-tou>p {
  height: 100px;
  line-height: 100px;
}

/* .popup-tou2{
  width: 86%;
  height: 50px;
  margin-top: 100px;
} */

.up {
  /* width: 30px; */
  /* height: 30px; */
  border-radius: 50%;
}
.pai{
  border-bottom: 1px solid #ccc;
}

</style>
